<template>
    <div class="show">
        <!--非遗传承-->
        <div class="showBox">
            <div class="s1">
                <img style="width: 100%;height: 100%" src="https://gjy-mall.oss-cn-shenzhen.aliyuncs.com/gjy-mall/images/20211004/csjy.jpg">
            </div>

            <div class="s2" v-for="(item, index) in newGoods" :key="index">
                <a v-bind:href="'/#/detail/'+item.id">
                    <img :src="item.pic" style="width: 100%;height: 100%" :alt="item.value">
                </a>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "showBox",
        data() {
            return {
                newGoods: [],

            }
        },
        mounted() {
            this.getNewGoods();
        },

        methods: {
            getNewGoods() {
                this.axios.get('/home/newShow').then(response => {
                    this.newGoods = response;
                })
            },
        }
    }
</script>

<style scoped>

    .show{
        position: relative;
        width: 1226px;
        height: auto;
        margin: 0 auto;
    }

    .showBox{
        position: relative;
        width: 1226px;
        height: 190px;
        margin-top: 15px;
        border-radius: 5px;
        display: flex;
    }
    .s1{
        border-radius: 5px;
        width: 236px;
        float: left;
        background-color: #666666;
    }

    .s2{
        margin-left: auto;
        border-radius: 5px;
        width: 310px;
        float: left;
        background-color: #666666;
    }
</style>